<template>
    <eui-page-frame :topHeight="250" :withOutBorder="true">
        <template #top>
            <view class="content-img">
                <eui-navbar ref="EuiNavBar" title="商品列表" color="#000000" backgroundColor="#FFFFFF">
                </eui-navbar>
                <view class="top-view">
                    <eui-search-bar ref="RdsSearchBar" v-model="searchText" placeholder="请输入关键字、条码、编码、plu码、拼音码"
                        leftIcon="icon-sousuo" @confirm="searchConfirm" @leftIconClick="leftIconClick" radius="30">
                    </eui-search-bar>
                </view>
            </view>
        </template>
        <view class="footer-view">
            <scroll-view :scroll-top="0" scroll-y="true" :style="{ height: c_height + 'rpx' }" @scrolltolower="loadMore"
                ower-threshold="50">
                <eui-base-card type="detail" v-if="dataList.length !== 0">
                    <view class="m-list-top" v-for="(item, index) in dataList" :key="index"
                        @click="templateClick(item)">
                        <eui-text :value="`[${item.c_gcode}]${item.c_name}`" type="name" :title="`${index + 1}. 商品`"
                            occupy />
                        <eui-text v-model="item.c_barcode" type="name" title="条码" />
                        <eui-text v-model="item.c_pluno" type="name" title="PLU码" />
                        <eui-text v-model="item.c_adno" type="titlename"
                            :name="getRelatedName('rdsDeparts', item.c_adno)" title="部门" />
                        <eui-text :value="getRelatedName('rdsGdsclasses', item.c_ccode)" type="name" title="品类" />
                        <eui-text v-model="item.c_bcode" type="titlename"
                            :name="getRelatedName('rdsBrands', item.c_bcode)" title="品牌" />
                        <eui-text v-model="item.c_basic_unit" type="name" title="单位" />
                        <eui-text v-model="item.c_model" type="name" title="规格" />
                        <eui-text :value="getDictName('商品类型', item.c_type)" type="name" title="商品类型" />
                    </view>
                </eui-base-card>
                <view v-if="dataList.length === 0">
                    <image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
                    <view class="no-data-text">暂无数据</view>
                </view>
            </scroll-view>
        </view>
    </eui-page-frame>
</template>

<script setup type="ts">
import { ref, reactive, onMounted } from 'vue';
import { useMainStore } from "@/store/modules/store";
import { useLoginStore } from "@/store/modules/useLoginStore";
import { getRelatedName, getDictName, getDictSelectList, getDictSelect } from '../../components/RelatedName.js';
import { onLoad } from "@dcloudio/uni-app";
import useService from '@/hooks/useService';
const service = useService({ prefix: "bcApi" });

const mainStore = useMainStore();
const LoginStore = useLoginStore();
const EuiNavBar = ref(null);
const RdsSearchBar = ref(null);
const searchText = ref('');
const sUserStore = ref('');
const sUserStoreName = ref('');
const sUser = ref('');
const dataList = ref([]);
const c_store_id = ref('');
const c_height = ref('');
const CurrentPage = ref(1);  //第几页
const PageSize = ref(20);  //每页10条
const RowsCount = ref(0);  //总条数
const PageCount = ref(1);  //总页数
const { loginInfo } = mainStore;

onMounted(async () => {
    await getListHeight();
})

onLoad(async (option) => {
    await getListHeight();
    if (option.c_store_id) {
        c_store_id.value = option.c_store_id;
    }
    if (option.keyWord) {
        searchText.value = option.keyWord;
    }
    await getData();
})

const getListHeight = async () => {
    uni.getSystemInfo({
        success: res => {
            let info = uni.createSelectorQuery().select(".footer-view");
            info.boundingClientRect(function (data) { //data - 各种参数
                //获取列表高度
                let height = res.windowHeight - (data?.top || 0);
                //转换rpx
                c_height.value = height / (res.windowWidth / 750);
            }).exec()
        }
    });
}

const templateClick = (e) => {
    let pages = getCurrentPages(); //获取所有页面栈实例列表
    let prevPage = pages[pages.length - 2]; //上一页页面实例
    prevPage.$vm.$.exposed.SelectionChanged({
        type: 'c_gcode',
        c_gcode: e.c_gcode,
        c_barcode: e.c_barcode,
        c_name: e.c_name,
    }); //执行函数也是同理
    uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
        delta: 1
    });
};
const leftIconClick = async () => {
    await getData();
}
const searchConfirm = async (e) => {
    if (!e) {
        return;
    }
    searchText.value = e.value;
    await getData();
}
// 查询数据列表
const getData = async (e) => {
    if (!e) {
        CurrentPage.value = 1;
        dataList.value = [];
    }
    uni.showLoading({ title: "正在加载...", mask: true })
    const req = {
        IsNotPage: false,
        CurrentPage: CurrentPage.value,
        PageSize: PageSize.value,
        WhereList: [{ c_col: "c_store_id", c_oper: "等于", c_value: c_store_id.value, c_logic: "而且", }]
    };
    if (searchText.value) {
        req.WhereList.push({
            c_col: "keyWord",
            c_oper: "等于",
            c_value: searchText.value,
            c_logic: "而且",
        });
    }
    const result = await service.request('弹窗通用查询', 'FetchComplexGds', req, '261');
    uni.hideLoading();
    CurrentPage.value = result.CurrentPage; //第几页
    PageSize.value = result.PageSize; //每页10条
    RowsCount.value = result.RowsCount; //总条数
    PageCount.value = result.PageCount; //总页数
    if (result.CurrentPage == 1) {
        dataList.value = result.ReturnObject;
    } else {
        dataList.value = dataList.value.concat(result.ReturnObject);
    }
}
const loadMore = async () => {
    console.log('loadMore');
    if (CurrentPage.value < PageCount.value) {
        CurrentPage.value = CurrentPage.value + 1;
        await getData(true);
    }
}
</script>
<style lang="scss" scoped>
@import '../../../../main.scss';

.content {
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: #F2F2F2;
    padding: 0px !important
}

.content-img {
    background-color: #FFFFFF;
    background-size: 100% 176rpx;
    background-repeat: no-repeat;
    width: 100%;
}

.navigation {
    flex: 0 0 auto;
    margin-bottom: 5px;
}

.footer-view {
    width: 100%;
    flex: 1;
}

.bt-button {
    background-color: #FFFFFF;
    padding: 10rpx 0rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.m-list-top {
    width: 100%;
    display: grid;
    grid-template-columns: 51% 49%;
    font-size: 12px;
    padding: 10rpx 0rpx;
}

.image-min {
    width: 100%;
    height: 150rpx;
    opacity: 0.6;
    margin-top: -20rpx;
}

.no-data-text {
    text-align: center;
    color: #cccccc;
    font-size: 26rpx;
    margin-top: -20rpx;
}
</style>
